<template>
  <div class="box">
    <div class="content">
      <div class="top">
        <h1>系统登录</h1>
      </div>
      <!-- 账号输入框 -->
      
      <div style="position: relative;">
        <el-input v-model="account" style="width: 400px; margin-bottom:50px; height: 32px;" placeholder="请输入账号"
          :class="{ 'is-invalid': !account && accountTouched }" @blur="handleBlur('account')">
          <template #prefix>
            <el-icon class="el-input__icon">
              <UserFilled color="#fff" />
            </el-icon>
          </template>
        </el-input>
        <!-- 账号输入框错误提示 -->
        <div v-if="!account && accountTouched" class="error-message">请输入账号</div>
      </div>

      <!-- 密码输入框 -->
      <div style="position: relative;">
        <el-input v-model="password" style="width: 400px; margin-bottom:50px; height: 32px;" type="password"
          placeholder="请输入密码" show-password :class="{ 'is-invalid': !password && passwordTouched }"
          @blur="handleBlur('password')">
          <template #prefix>
            <el-icon class="el-input__icon">
              <Lock color="#fff" />
            </el-icon>
          </template>
        </el-input>
        <!-- 密码输入框错误提示 -->
        <div v-if="!password && passwordTouched" class="error-message">请输入密码</div>
      </div>

      <el-button style="width: 400px; height: 32px;background-color:blue;" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { checkLogin } from '../api/account';
import { UserFilled, Lock } from '@element-plus/icons-vue';
const router = useRouter();
const account = ref('');
const password = ref('');
const loading = ref(false);
// 记录账号输入框是否失去过焦点
const accountTouched = ref(false);
// 记录密码输入框是否失去过焦点
const passwordTouched = ref(false);

// 处理输入框失去焦点事件
const handleBlur = (field) => {
  if (field === 'account') {
    accountTouched.value = true;
  } else if (field === 'password') {
    passwordTouched.value = true;
  }
};



const formData = reactive({
  account: '',
  password: ''
})

const login = async () => {
  // 更新 formData 的值
  formData.account = account.value
  formData.password = password.value
  let res = await checkLogin(formData)
  console.log(res)


  if (res.code === 0) {
    ElMessage.success(res.msg)
    router.push('/home')
  } else {
    ElMessage.error(res.msg)
  }
}


// 登录函数
//  const login = () => {
//     console.log('用户名：', username.value);
//     console.log('密码：', password.value);

//     axios.post('http://8.137.157.16:9002/users/checkLogin',{
//     account:username.value,
//     password:password.value
//   })
//   .then(res=>{
//     console.log(res.data)
//     if(res.data.code==0){
//       router.push('/home')
//     }
//   })
//   .catch(err=>{
//     console.log(err)
//     if(err.response.data.code===400){
//       ElMessage.error('账号或密码错误')
//     }
//   })
//   };


</script>

<style scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #6c69e9;
}
.top {
  width: 300px;
  height: 50px;
  text-align: center;
  margin-bottom: 10px;
  font-size: 30px;
  justify-content: space-between;
}
.content {
  width: 400px;
  height: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
}

:deep(.el-input__inner) {
  color: white;
}

/* 输入框错误样式 */
.is-invalid {
  border: 1px solid red;
}

/* 错误提示信息样式 */
.error-message {
  color: red;
  font-size: 12px;
  position: absolute;
  top: 32px;
  /* 调整提示信息位置，使其位于输入框下方 */
  left: 0;
}

/* 添加一些过渡效果 */
.el-input {
  transition: all 0.3s ease;
}

.el-button {
  transition: all 0.3s ease;
}

/* 输入框获得焦点时的效果 */
.el-input:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>